<template>
  <div class="comment-status flex-yc">
    <span>全部（1079）</span>
    <span>好评（1079）</span>
    <span>中评（0）</span>
    <span>差评（0）</span>
  </div>
  <div class="comment-item flex" v-for="i in 3">
    <div class="flex-y flex-yc">
      <img src="" />
      <div class="vip flex-yc">
        <i class="iconfont icon-vip"></i>
        v2
      </div>
    </div>
    <div class="con">
      <h3>吴老师</h3>
      <span class="rate flex-yc">
        已上课6时25分时评论
        <el-rate
          class="el-icon--right"
          model-value="3"
          disabled
          :colors="['#3AACE3', '#3AACE3', '#3AACE3']"
        />
      </span>
      <p>
        课程与描述相符，老师的讲解表达清楚易懂，老师的课前服务热情周到。很喜欢老师和老师的课程。点赞！！老师讲课很幽默，很喜欢老师的课程！！谢谢雁老师，老师辛苦了。谢谢老师！
      </p>
      <div class="time flex-yc flex-xbt">
        <span>
          <i class="iconfont icon-time"></i>
          2023-12-12 18:18:18
        </span>
        <span>
          <i class="iconfont icon-like"></i>
          33
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.comment-item {
  padding: 30px 0 16px;

  & + .comment-item {
    border-top: 1px solid $borderCol;
  }

  > .flex-y {
    margin-right: 17px;

    img {
      width: 60px;
      height: 60px;
      margin-bottom: 5px;
      background-color: #eee;
      border-radius: 50%;
    }

    .vip {
      padding: 2px 4px;
      font-size: 12px;
      color: $primary;
      background-color: rgb(58 172 227 / 20%);
      border-radius: 20px;

      i {
        margin-right: 2px;
        font-size: 12px;
      }
    }
  }

  > .con {
    flex: 1;

    h3 {
      font-size: 16px;
      font-weight: 500;
      color: #0f1419;
    }

    .rate {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #586470;
    }

    p {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #586470;
      line-height: 16px;
    }

    .time {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #8691a3;

      i {
        font-size: 12px;
      }
    }
  }
}
.comment-status {
  padding-bottom: 13px;

  span {
    padding: 8px 12px;
    font-size: 14px;
    color: #8691a3;
    cursor: pointer;
    border: 1px solid $borderCol;
    border-radius: 3px;

    &:hover,
    &.active {
      color: $primary;
      background-color: #d8eef9;
      border-color: #d8eef9;
    }

    & + span {
      margin-left: 35px;
    }
  }
}
</style>
